<template>
  <view class="page">
    <view class="page-container">
      <!-- 页面头部 -->
      <view class="page-header">
        <!-- Logo -->
        <view class="logo">🚗</view>
        <!-- 页面标题 -->
        <view class="page-title">欢迎登录</view>
        <view class="page-subtitle">汽车管理系统</view>
      </view>

      <!-- 登录表单 -->
      <view class="form fade-in">
        <!-- 账号输入 -->
        <view class="form-item">
          <label class="form-label">账号</label>
          <input
            class="form-input"
            type="text"
            placeholder="请输入账号"
            v-model="formData.account"
            :class="{ error: errors.account }"
          />
          <view v-if="errors.account" class="error-message">{{
            errors.account
          }}</view>
        </view>

        <!-- 密码输入 -->
        <view class="form-item">
          <label class="form-label">密码</label>
          <input
            class="form-input"
            type="password"
            placeholder="请输入密码"
            v-model="formData.password"
            :class="{ error: errors.password }"
          />
          <view v-if="errors.password" class="error-message">{{
            errors.password
          }}</view>
        </view>

        <!-- 用户协议 -->
        <view class="agreement">
          <checkbox
            class="agreement-checkbox"
            :checked="formData.agreeProtocol"
            @change="handleProtocolChange"
          />
          <text class="agreement-text">
            登录即代表同意
            <text class="agreement-link" @tap="showProtocol"
              >《用户授信协议》</text
            >
          </text>
        </view>

        <!-- 登录按钮 -->
        <button
          class="btn btn-primary"
          :disabled="!canSubmit"
          @tap="handleLogin"
        >
          {{ isLoading ? "登录中..." : "登录" }}
        </button>

        <!-- 操作链接 -->
        <view class="action-links">
          <text class="action-link" @tap="goToRegister">立即注册</text>
          <text class="action-link" @tap="goToForgotPassword">忘记密码</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { authApi } from '@/utils/api.js'
import { validate } from '@/utils/common.js'

/**
 * 页面标题
 */
const pageTitle = '登录'

/**
 * 表单数据
 */
const formData = ref({
  account: '',      // 账号
  password: '',     // 密码
  agreeProtocol: false  // 是否同意协议
})

/**
 * 表单错误信息
 */
const errors = ref({
  account: '',
  password: ''
})

/**
 * 加载状态
 */
const isLoading = ref(false)

/**
 * 是否可以提交表单
 */
const canSubmit = computed(() => {
  return formData.value.account &&
    formData.value.password &&
    formData.value.agreeProtocol &&
    !isLoading.value
})

/**
 * 处理用户协议状态变化
 */
function handleProtocolChange (event) {
  formData.value.agreeProtocol = event.detail.value.length > 0
}

/**
 * 表单验证
 */
function validateForm () {
  const newErrors = {}

  // 验证账号
  if (!formData.value.account) {
    newErrors.account = '请输入账号'
  } else if (formData.value.account.length < 3) {
    newErrors.account = '账号长度不能少于3位'
  }

  // 如果是手机号格式，验证手机号
  if (/^1\d{10}$/.test(formData.value.account) && !validate.phone(formData.value.account)) {
    newErrors.account = '请输入正确的手机号'
  }

  // 验证密码
  if (!formData.value.password) {
    newErrors.password = '请输入密码'
  } else if (formData.value.password.length < 6) {
    newErrors.password = '密码长度不能少于6位'
  }

  errors.value = newErrors
  return Object.keys(newErrors).length === 0
}

/**
 * 处理登录
 */
async function handleLogin () {
  // 表单验证
  if (!validateForm()) {
    return
  }

  // 检查是否同意协议
  if (!formData.value.agreeProtocol) {
    uni.showToast({
      title: '请先同意用户协议',
      icon: 'none'
    })
    return
  }

  isLoading.value = true

  try {
    // 调用登录API
    const response = await authApi.login({
      account: formData.value.account,
      password: formData.value.password
    })

    // 保存登录状态
    uni.setStorageSync('token', response.data.token)
    uni.setStorageSync('userInfo', response.data.userInfo)

    uni.showToast({
      title: '登录成功',
      icon: 'success'
    })

    // 跳转到首页
    setTimeout(() => {
      uni.redirectTo({
        url: '/pages/index/index'
      })
    }, 1500)

  } catch (error) {
    console.error('登录失败:', error)
    uni.showToast({
      title: '登录失败，请重试',
      icon: 'none'
    })
  } finally {
    isLoading.value = false
  }
}

/**
 * 跳转到注册页面
 */
function goToRegister () {
  uni.navigateTo({
    url: '/pages/register/register'
  })
}

/**
 * 跳转到忘记密码页面
 */
function goToForgotPassword () {
  uni.navigateTo({
    url: '/pages/forgot-password/forgot-password'
  })
}

/**
 * 显示用户协议
 */
function showProtocol () {
  uni.showModal({
    title: '用户授信协议',
    content: '这里是用户授信协议的内容...',
    showCancel: false
  })
}
</script>

<style scoped>
/* 页面特定样式 */

/* 错误消息样式 */
.error-message {
  color: var(--danger-color);
  font-size: var(--font-size-sm);
  margin-top: var(--spacing-xs);
  padding-left: var(--spacing-sm);
}

.form-input.error {
  border-color: var(--danger-color);
}

/* 协议复选框样式 */
.agreement {
  margin: var(--spacing-xl) 0;
  padding: 0 var(--spacing-sm);
}

.agreement-text {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}

.agreement-link {
  color: var(--primary-color);
}

/* 按钮禁用状态 */
.btn:disabled {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-muted) !important;
  cursor: not-allowed;
}

/* 操作链接样式 */
.action-links {
  margin-top: var(--spacing-xl);
  display: flex;
  justify-content: space-between;
  padding: 0 var(--spacing-sm);
}

.action-link {
  color: var(--primary-color);
  font-size: var(--font-size-base);
  text-decoration: none;
}

.action-link:active {
  color: var(--primary-hover);
}

/* 响应式适配 */
@media screen and (max-width: 750px) {
  .page-header {
    padding: var(--spacing-xl) 0;
  }

  .logo {
    width: 100rpx;
    height: 100rpx;
    font-size: 40rpx;
  }
}
</style>